<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us" >
<head>

<title>Openlayers Extents Tool</title>

<script src="http://openlayers.org/api/OpenLayers.js"></script>

<style type="text/css">

html {
    height: 100%;
    font-family:"Lucida Grande","DejaVu Sans","Bitstream Vera Sans",sans-serif;
    font-size:10px;
    }

body {margin: 0px;}

#map {
	  width: 100%;
	  height: 70%;
  	}


div.olControlMousePosition {
    right:250px;
    bottom: 0em;
    display: block;
    position: absolute;
    font-family: "Lucida Grande", Verdana, Arial, sans-serif;
    font-size: small;
    }

.olControlPermalink {
    right: 0px;
    bottom: 0em;
    display: block;
    position: absolute;
    font-family: "Lucida Grande", Verdana, Arial, sans-serif;
    font-size: small;
    }

.olControlScale {
    right: 100px;
    bottom: 0em;
    display: block;
    position: absolute;
    font-family: "Lucida Grande", Verdana, Arial, sans-serif;
    font-size: small;
    }

.olLayerGoogleCopyright {
    left: 2px;
    bottom: 2px;  
    }

.olLayerGooglePoweredBy {
    left: 2px;
    bottom: 15px;   
    }

.olControlAttribution {
    font-size: small; 
    right: 3px; 
    color:steelblue;
    bottom: 2em; 
    position: absolute; 
    display: block;
    }

.olHandlerBoxZoomBox {
    border-left-style: none;
    border-bottom-style: ridge;
    border-right-style: none;
    border-top-style: groove;
    border-width: 2px;
    border-color: blue;
    position: absolute;
    background-color: steelblue;
    opacity: 0.50;
    font-size: 1px;
    filter: alpha(opacity=50);
    }

.title {
    word-spacing: 6px;
    color: #2f4272;
    font-weight: bold;
    text-shadow: 2px 2px 6px #f3fcff;
    position:absolute;
    top: 25px;
    z-index:10000;
    left: 100px;
    font-size: 30px;
    font-family: "Lucida Grande", Verdana, Arial, sans-serif;
    }
    
</style>
   
 <script type="text/javascript">
    var feat, attr, select_options, select, map_options, map;
    function init(location, zoom){

    map_options = {
        projection: new OpenLayers.Projection("EPSG:900913"),
        displayProjection: new OpenLayers.Projection("EPSG:4326"),
        units: "m",
        maxResolution: 156543.0339,
        theme : null,
        maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
        numZoomLevels: 22
        }

    map = new OpenLayers.Map('map', map_options);
    var osm = new OpenLayers.Layer.OSM("Mapnik from OSM");
    map.addLayers([osm]);

            
    // Add controls, including pre-maximized layerswitcher
    var layerswitcher = new OpenLayers.Control.LayerSwitcher('layerswitcher');
    map.addControl(layerswitcher);
    layerswitcher.maximizeControl();
    map.addControl(new OpenLayers.Control.MousePosition('mousepostion'));
    map.addControl(new OpenLayers.Control.Permalink('permalink'));
    map.addControl(new OpenLayers.Control.Scale());


    function write_out(srs,bounds){
        var bbox = bounds.toBBOX();
        $(srs).value += bbox + '\n';
    }
    
    function write_bounds() {
    
         var bounds = map.getExtent();
         write_out('merc',bounds);
         var wgs84_bounds = bounds.toGeometry().transform(map.getProjectionObject(), map.displayProjection).getBounds();
         write_out('wgs84',wgs84_bounds); 
         
    }

    function setBoundsFromMap(e) {
        write_bounds();
    }
    
    // Enable the permalink method
    // If permalink URL does not exist them will zoom to default bounds (hackish approach)  
    if (!map.getCenter()) {
        if (location) { 
        map.setCenter(location, zoom); 
        } else {
            map.zoomToMaxExtent();
            map.zoomIn(3);
        }}
        
    // Register *after* we set the map for the first time
    map.events.register("moveend", map, setBoundsFromMap);
    map.events.register("zoomend", map, setBoundsFromMap);         
    }
    </script>
  </head>
  
  <body onload="init()">
    
    <h1 style="position:absolute; z-index:10000; top:20px; left: 100px;">Get a slew of Extents!</h1>

    <div id="map">
    </div>

    <div>
        <textarea id="wgs84" style="font-size:smallest;float:left;width:50%;height:30%;"></textarea>
        <textarea id="merc" style="font-size:smallest;float:right;width:50%;height:30%;"></textarea>
    </div>

  </body>

</html>
